<template>
    <div class="left-bottom">
        <ul>
            <li
                v-for="item in list"
                :key="item.id"
                @click="changeId(item.id)"
                :class="item.id === idLi ? 'colorLi' : ''"
            >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '一句诗词'
                },
                {
                    id: 2,
                    name: '毒鸡汤'
                },
                {
                    id: 3,
                    name: '励志句子'
                }
            ],
            idLi: 1
        };
    },
    // 挂载完成之后加载
    mounted() {
        this.changeId(this.idLi);
    },
    methods: {
        changeId(val) {
            this.idLi = val;
            if (this.idLi === 1) {
                this.$router.push('/poetry');
            } else if (this.idLi === 2) {
                this.$router.push('/chickenSoup');
            } else {
                this.$router.push('/motivational');
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.left-bottom {
    text-align: center;
    width: 100%;
    ul {
        margin-top: 30px;
        li {
            list-style: none;
            margin-top: 10px;
            cursor: pointer;
        }
        li:hover {
            color: #4caf50;
        }
        .colorLi {
            color: #4caf50;
        }
    }
}
</style>
